<template>
	<view class="one">
			<form action="" >
				<view class="wrap">
					<view class="title">ID：</view>
					<view><input type="text" class="item" v-model="userInfo.id" placeholder="请输入id"></view>
				</view>
				<view class="wrap">
					<view class="title">姓名：</view>
					<view><input type="text" class="item" v-model="userInfo.username" placeholder="请输入姓名"></view>
				</view>
				<view class="wrap">
					<view class="title">性别：</view>
					<radio-group name="" @change="radioChange">
						<label v-for="(item,index) in sexLists" :key="item.value">
							<radio :value="item.value" :checked="index === sex" />
							<text>{{item.name}}</text>
						</label>
					</radio-group>
				</view>
				<view class="wrap">
					<view class="title">邮&emsp;箱:</view>
				
					<input class="uni-input" v-model="formData.email" style="border: 1px solid #ccc;" placeholder="请输入邮箱" />
				</view>
				<view class="wrap">
					<view class="title">身份证号:</view>
				
					<input class="uni-input" v-model="formData.idCard" style="border: 1px solid #ccc;"
						placeholder="请输入身份证号" />
				</view>
				<view class="phone" style="width: 180px;margin-left: 80px;">
					<button @click="validateEmail" class="mini-btn">验证身份证号/邮箱</button>
				</view>
				<view class="wrap">
					<view class="title">出生日期：</view>
					<view>
						<picker mode="date" :value="date" :start="startDate" :end="endDate"
							@change="bindDateChange">
							<input type="text" :value="date" class="item" placeholder="请输入出生日期">
						</picker>
					</view>
				</view>
				<view class="wrap">
					<view class="title">工作经历：</view>
					<textarea style="width: 177px;" placeholder-style="color:#666" class="item2" placeholder="工作经历" v-model="userInfo.job"/>
				</view>
				
				<view class="wrap">
					<button type="primary" @tap="formFn">提交</button>
				</view>
			</form>
		</view>
         
			<button @click="jump">跳转第三题</button>
</template>

<script setup lang="ts">
		
	let formData = reactive({
		email:"",
		idCard:""
	})
	const validateEmail = () => {
		const reg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		// reg.test(formData.email);
		console.log("验证", reg.test(formData.email));
		const idCardReg = /^(?:\d{15}|\d{17}[\dXx])$/;
		if (reg.test(formData.email) && idCardReg.test(formData.idCard)) {
			uni.showToast({
				title: '邮箱、身份证格式正确'
			})
	
		} else {
			uni.showToast({
				title: '邮箱、身份证格式不正确',
				icon: 'none'
			})
			return;
		}
	};
	import {onLoad} from "@dcloudio/uni-app"
	import {reactive,ref} from 'vue'
		let userInfo = reactive({
			id: "",
			username: "",
			birthday: "",
			job: "",
			sex:"",
		})
		let sex = ref(0)
		let date = ref("请选择出生日期")
		let startDate = ref( "2000-01-01")
		let endDate=ref("2099-12-31")
		let sexLists = ref([
			{
									value: '男',
									name: '男'
								},
								{
									value: '女',
									name: '女',
									checked: 'true'
								},
								{
									value: '保密',
									name: '保密'
								}
		])
		// 单选按钮事件
			let radioChange= (evt:any)=> {
						for (let i = 0; i < sexLists.value.length; i++) {
							// 判断当前按钮的值是不是用户所选的值
							if (sexLists.value[i].value === evt.detail.value) {
								sex.value = i;	
								// 如果相等则换成选择的值，找到匹配选项跳出循环
								userInfo.sex=sexLists.value[sex.value].value
								break;
							}
						}
						
					}
					// 出生日期
				let	bindDateChange=(e:any)=> {
						date.value = e.detail.value
						userInfo.birthday=e.detail.value
						console.log("userInfo.birthday",userInfo.birthday);
					}
				let	formFn=()=>{
						console.log(userInfo);
					}
	let jump = () => {
		console.log('ppp')
		uni.navigateTo({
			url: '../Time/Time'
		})
	}
</script>

<style>
	.one {
			width: calc(100% - 40rpx);
			margin: 20rpx;
		}
	
		.one .wrap {
			margin: 20rpx 0;
			display: flex;
		}
		.one .wrap .title{
			line-height: 88rpx;
			width: 80px;
		}
	
		.one .wrap .item {
			width: 177px;
			    height: 25px;
			    line-height: 20px;
			text-align: left;
			    border: 1px solid #ccc;
			    /* border-radius: 44rpx; */
			    box-sizing: border-box;
			    text-indent: 8px;
		}
		.one .wrap input{
			margin-top: 8px;
		}
		.one .wrap .item2 {
			width: 100%;
			border: 1px solid #ccc;
			box-sizing: border-box;
			text-indent: 20rpx;
		}
</style>